
import { Input, Modal } from 'antd';
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import styles from './index.less';

const ConfirmOperation: React.FC = forwardRef((props: { [key: string]: any }, ref) => {
    let { title = '为了保证此次操作请在下方输入框输入', callback = () => { }, sureWord = '确定' } = props
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    // const [confirmDisabled, setConfirmDisabled] = useState(true);
    const [value, setValue] = useState('')
    useImperativeHandle(ref, () => ({
        showModal
    }))
    const showModal = () => {
        setIsModalVisible(true);
        // setConfirmDisabled(true);
        setValue('')
    };

    const handleOk = async () => {
        console.log(callback);
        setConfirmLoading(true)
        await callback()
        setIsModalVisible(false);
        setConfirmLoading(false)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        setConfirmLoading(false)
    };

    return (
        <>
            <Modal
                title="Basic Modal"
                visible={isModalVisible}
                confirmLoading={confirmLoading}
                onOk={handleOk}
                onCancel={handleCancel}
                okButtonProps={{ disabled: value != sureWord }}
            >
                <div>{title} <strong>{sureWord}</strong> </div>
                <div className={styles.inpBox}>
                    <Input value={value} onChange={(e) => {
                        setValue(e.target.value)
                    }} placeholder={sureWord} />
                </div>
            </Modal>
        </>
    );
});

export default ConfirmOperation;
